<template>
	<view class="hb-comment" @scrolltolower="loadMore">
		<!--scroll-y -->
		<scroll-view 
    	  scroll-y
    	  style="height: 100vh"
    	  @scrolltolower="loadMore"
    	  :lower-threshold="50"
    	>
			<!-- 阅读数-start -->
			<!--view>
				<img style="width: 14px; height: 14px;"
					src="" />
				<span class="top-read">评论 {{commentData.readNumer}} 条</span>
			</view-->
			<uv-divider :text="'评论 ' + commentData.readNumer + '条'"></uv-divider>
			<!-- 阅读数-end -->
			<!-- 阅读数下边那条线-start -->
			<!--view class="seg_line_box">
				<view class="seg_line"></view>
				<view class="seg_dot"></view>
				<view class="seg_line"></view>
			</view-->
			<!-- 阅读数下边那条线-end -->
			<!-- 评论主体-start -->
			<view class="comment-list" v-if="commentData.comment.length != 0">
				<!-- 评论主体-顶部数量及发表评论按钮-start -->
				<!--view class="comment-num">
					<view>共 {{commentData.commentSize}} 条评论</view>
					<view class="add-btn">
						<button type="primary" size="mini" @click="commentInput">发表评论</button>
					</view>
				</view-->
				<!-- 评论主体-顶部数量及发表评论按钮-end -->
				<!-- 评论列表-start -->
				<view class="comment-box" v-for="(item, index) in commentData.comment">
					<view class="comment-box-item">
						<view>
							<image :src="item.avatarUrl || emptyAvatar" mode="aspectFill" class="avatar"></image>
						</view>
						<view class="comment-main">
							<!-- 父评论体-start -->
							<!--view class="comment-main-top">
								<view class="nick-name-box">
									<view class="comLogo com1" v-if="index == 0">沙发</view>
									<view class="comLogo com2" v-if="index == 1">板凳</view>
									<view class="comLogo com3" v-if="index == 2">地板</view>
									<view class="comLogo com4" v-if="index > 2">{{index + 1}}楼</view>
									<view class="nick-name">{{item.nickName}}</view>
								</view>
								<view class="zan-box" @click="like(item.id)">
									<view class="foot-time" >{{item.createTime}}</view>
									<span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span>
									<img style="width: 20px; height: 20px;color: #000;" v-if="!item.hasLike"
										src="" />
									<img style="width: 20px; height: 20px;color: #000;" v-else
										src="" />
								</view>
							</view-->
							<view class="comment-main-content" >
								<view class="beijing-10" @click="reply(item.nickName,item.nickName,item.id,item.content)">
									<view class="comment-main-top">
										<view class="nick-name-box">
											<view class="nick-name">{{item.nickName}}</view>
								        </view>
										<view class="zan-box" >
											<view class="foot-time" >{{item.createTime}}</view>
										</view>
									</view>

									{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
								</view>
								
								
								
								<span v-if="item.content.length > 60">
									{{item.hasShowMore ? item.content.slice(59) : '...'}}
									<span class="foot-btn" @click="showMore(item.id)">
										{{item.hasShowMore ? '收起' : '展开'}}
									</span>
								</span>
								<view v-if="item.yinyong" class="beijing-11 d-chaochu-2 d-shang-5">
									{{ item.yinyong.author }} : {{ item.yinyong.content }}
								</view>
							</view>
							<view class="comment-main-foot" >
								<!--view class="foot-time" >{{item.createTime}}</view-->
								<!--view class="foot-btn" @click="reply(item.nickName,item.nickName,item.id)">回复.</view-->
								<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item.id)">删除</view>
							</view>
							<!-- 父评论体-end -->
							
							<!-- 子评论列表-start -->
							<view class="comment-sub-box">
								<view class="comment-sub-item" v-for="each in item.children">
									<view>
										<image :src="each.touxiang || emptyAvatar" mode="aspectFill" class="avatar-2">
										</image>
									</view>
									<view class="comment-main">
										<view class="sub-comment-main-top">
											<view class="nick-name">{{each.author}}</view>
											<view class="zan-box" @click="like(each.id)">
												<view class="foot-time">{{each.inputtimes}}</view>
												<!--span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span>
												<img style="width: 14px; height: 14px;" v-if="!each.hasLike"
													src="" />
												<img style="width: 14px; height: 14px;" v-else
													src="" /-->
											</view>
										</view>
										<view class="comment-main-content">
											<view @click="reply(each.author,each.author,each.id)">{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}</view>
											<span v-if="each.content.length > 60">
												{{each.hasShowMore ? each.content.slice(59) : '...'}}
												<span class="foot-btn" @click="showMore(each.id)">
													{{each.hasShowMore ? '收起' : '展开'}}
												</span>
											</span>
										</view>
										<view class="comment-main-foot">
											<!--view class="foot-time">{{each.inputtimes}}</view-->
											<!--view class="foot-btn" @click="reply(each.author,each.author,each.id)">
												回复</view-->
											<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 子评论列表-end -->
						</view>
					</view>
				</view>
				<!-- 评论列表-end -->
			</view>
			<!-- 评论主体-end -->
			<!-- 无评论-start -->
			<view class="comment-none" v-else>
				暂无评论，<span style="color: #007AFF;">抢沙发</span>
			</view>
			<!-- 无评论-end -->
			<!-- 新增评论-start -->
			<view class="comment-submit-box" v-if="submit" @click="closeInput">
				<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
				<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
					<view class="comment-submit">
						<view class="btn-click cancel" @click="closeInput">取消</view>
						<view>
							<view class="replayTag" v-show="showTag">
								<view>回复在 {{pUser}} 的评论下</view>
								<view @click="tagClose" class="replyTagClose">×</view>
							</view>
						</view>
						<view>
							<view class="btn-click" @click="add">发布</view>
						</view>
					</view>
					<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
						@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
				</view>
			</view>
			
			<!-- 新增评论-end -->
			<!--下拉触发-->
			<!-- 加载状态提示 -->
			
			<!--view class="d-kuan d-juzhong d-shangxia-20" v-if="isLoading">
				<uv-loading-icon></uv-loading-icon>
  			</view-->
  			<view class="d-kuan d-juzhong d-shangxia-20 d-wenzi-hui" v-if="nodata">
  			    <uv-divider text="没有更多数据了"></uv-divider>
  			</view>
			  <uv-gap height="150" bgColor="#eeeeee"></uv-gap>

        </scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'hb-comment',
		props: {
			cmData: {
				type: Object,
				default: () => {
					return null;
				}
			},
			deleteTip: {
				type: String,
				default: () => {
					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
				}
			},
			nodata: {
				type: Boolean,
                default: false
			}
		},
		watch: {
			cmData: {
				handler: function(newVal, oldVal) {
					this.init(newVal);
				},
				immediate: true
			}
		},
		data() {
			return {
				"emptyAvatar": "",
				"commentData": null,
				"placeholder": "请输入评论",
				"commentReq": {
					"pId": null, // 评论父id
					"content": null // 评论内容
				},
				"pUser": null, // 标签-回复人
				"showTag": false, // 标签展示与否
				"focus": false, // 输入框自动聚焦
				"submit": false, // 弹出评论
				"KeyboardHeight": 0, // 键盘高度
        		"isLoading": false,  // 加载状态
        		"noMoreData": false,  // 是否还有更多数据
        		"page": 1,  // 当前页码
        		"pageSize": 10,  // 每页数量
			};
		},
		mounted: function() {
			 // 仅微信小程序支持
  			if (typeof uni.onKeyboardHeightChange === 'function') {
  			  uni.onKeyboardHeightChange(res => {
  			    this.KeyboardHeight = res.height;
  			  });
  			} else {
  			  // 其他平台的替代方案
  			  this.KeyboardHeight = 300;
  			}
			/*uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})*/
		},
		methods: {
			// 初始化评论
			init(cmData) {
				// for (var i in cmData.comment) {
				// 	cmData.comment[i].hasShowMore = false;
				// 	for (var j in cmData.comment[i].children) {
				// 		cmData.comment[i].children[j].hasShowMore = false;
				// 	}
				// }
				//this.commentData = cmData;
				if(this.page === 1) {
        		    this.commentData = cmData;
        		} else {
        		    // 追加新数据
        		    this.commentData.comment = [...this.commentData.comment, ...cmData.comment];
        		}
        		this.isLoading = false;
        		this.noMoreData = cmData.comment.length < this.pageSize;
				//console.log('初始化完成，isLoading:', this.isLoading, 'noMoreData:', this.noMoreData);
			},
			// 加载更多评论
			loadMore() {
				console.log('触发加载更多', {
    			    isLoading: this.isLoading,
    			    noMoreData: this.noMoreData,
    			    page: this.page,
    			    currentDataLength: this.commentData?.comment?.length || 0
    			});
    		    if(this.nodata) return;

    		    this.isLoading = true;
    		    this.page++;
    		    this.$emit('load-more', {
    		        page: this.page,
    		        pageSize: this.pageSize
    		    });
				console.log('加载更多评论');
    		},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 回复评论
			reply(pUser, reUser, pId, neirong) {
				/*this.pUser = pUser;
				this.commentReq.pId = pId;
				if (reUser) {
					this.commentReq.content = '@' + reUser + ' ';
				} else {
					this.commentReq.content = '';
				}
				this.showTag = true;
				this.commentInput();*/
				this.$emit('tiwenzhi', pUser, reUser, pId,  neirong);
			},
			// 删除评论前确认
			confirmDelete(commentId) {
				var that = this;
				uni.showModal({
					title: '警告',
					content: that.deleteTip,
					confirmText: '确认删除',
					success: function(res) {
						if (res.confirm) {
							that.$emit('del', commentId);
						}
					}
				});
			},
			// 新增评论
			add() {
				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
					uni.showToast({
						title: '评论内容过短',
						duration: 2000
					});
					return
				}
				this.$emit('add', this.commentReq);
			},
			// 点赞评论
			like(commentId) {
				this.$emit('like', commentId);
			},
			// 新增完成
			addComplete() {
				this.commentReq.content = null;
				this.tagClose();
				this.closeInput();
			},
			// 点赞完成-本地修改点赞结果
			likeComplete(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
							.comment[i].likeNum++;
						this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j]
								.likeNum-- : this.commentData.comment[i].children[j].likeNum++;
							this.commentData.comment[i].children[j].hasLike = !this.commentData.comment[i].children[j]
								.hasLike;
							return
						}
					}
				}
			},
			// 删除完成-本地删除评论
			deleteComplete(commentId) {
				for (var i in this.commentData.comment) {
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children.splice(Number(j), 1);
							return
						}
					}
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment.splice(Number(i), 1);
						return
					}
				}
			},
			// 展开评论
			showMore(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
						this.$forceUpdate();
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j]
								.hasShowMore;
							this.$forceUpdate();
							return
						}
					}
				}
			},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
			},
			// 输入评论
			commentInput() {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
     .beijing-10{
		background-color: #f7f7f7;
		padding: 10rpx 20rpx 20rpx 20rpx;
		border-radius: 20rpx;
		position: relative;
	 }
	 .beijing-11 {
		background-color: #e6e6e6;
		padding: 10rpx;
		border-radius: 10rpx;
		position: relative;
		font-size: 12px;
		color: #777777;
	 }
	 .beijing-10::before {
	    content: "";
	    position: absolute;
	    left: -20rpx;
	    top: 30rpx;
	    width: 0;
	    height: 0;
	    border-top: 10rpx solid transparent;
	    border-right: 20rpx solid #f5f5f5;
	    border-bottom: 10rpx solid transparent;
	}
	.hb-comment {
		padding: 10rpx;
		height: 100vh; /* 添加固定高度 */
    	/*overflow-y: auto;*/ /* 确保启用滚动 */
    	-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
		/* 滚动条样式 */
		::-webkit-scrollbar {
		  width: 2px; /* 滚动条宽度 */
		  height: 5px; /* 滚动条高度 */
		}
	
	}
	/* 确保内容足够长可以滚动 */
	.comment-list {
  	  min-height: 101vh;
  	}
	.foot-time{
		font-size: 24rpx;
		padding-left: 10rpx;
		color: #b3b3b3;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
		width: 100% !important;
	}

	.comment-main-top {
		width: 100% !important;
		/*width: 600rpx;*/
		padding-top: 0rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		width: 510rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.avatar-2 {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 16rpx;
		font-size: 18rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #18c6d2;
	}

	.com2 {
		background-color: #18c6d2;
	}

	.com3 {
		background-color: #18c6d2;
	}

	.com4 {
		background-color: #18c6d2;
	}

	.nick-name {
		font-size: 28rpx;
		color: #848484;
	}

	.isLike {
		font-size: 30rpx;
		padding-right: 10rpx;
		color: #2fb88f;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2fb88f;
	}

	.comment-main-content {
		padding: 0rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
		color: #c4c4c4;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #b4b4b4;
	}

	.comment-sub-box {
		/*padding: 20rpx 0;*/
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
